<!-- 领取优惠券 -->
<template>
	<view class="buydetails">
		<view class="big-box" v-for="(item,index) in couponList" :key="index">
			<view class="top">
				<image :src="item.coupon_img_1" mode="scaleToFill"></image>
				<view class="m-tit">
					<text>{{item.name}}</text>
					<!-- <text>免费</text> -->
				</view>
				<view class="f-tit">
					<text>有效期：{{item.start_time+'-'+item.end_time}}</text>
					<!-- <text>¥99</text> -->
				</view>
			</view>
			<view class="m-box">
				<view class="t-item">
					<p>使用流程</p>
					<view class="lz-box">
						<view class="item">
							<!-- <image src="../../static/images/chenggong.png" mode="aspectFit"></image> -->
							<image src="../../../static/images/chenggong.png" mode="aspectFit"></image>
							<text>支付成功</text>
						</view>
						<view class="item">
							<!-- <image src="../../static/images/quan.png" mode="aspectFit"></image> -->
							<image src="../../../static/images/quan.png" mode="aspectFit"></image>
							<text>到店展示券</text>
						</view>
						<view class="item">
							<image src="../../../static/images/erweima.png" mode="aspectFit"></image>
							<text>展示二维码核销</text>
						</view>
					</view>
				</view>
				<view class="item-1">
					<text>使用场景</text>
					<text>实体店</text>
				</view>
				<view class="item-1">
					<text>商户名称</text>
					<text>{{item.business_name}}</text>
				</view>
				<view class="item-2" @tap="seeLocation">
					<view class="left">
						<text>商户位置</text>
						<view class="right">
							<text>{{item.city + item.area}}</text>
							<image src="../../../static/images/xiaofeiji.png" mode="aspectFit"></image>
						</view>
					</view>
					<p>{{item.address}}</p>
				</view>
				<view class="item-1">
					<text>使用时间</text>
					<text>{{item.start_time+'-'+item.end_time}}</text>
				</view>
				<view class="item-1">
					<text>商家电话</text>
					<text @tap="phoneCall">{{item.link_mobile}}</text>
				</view>
				<view class="sygz-box">
					<text>使用说明</text>
					<view class="item-tit">
						<p>{{item.rule}}</p>
					</view>
				</view>
			</view>
			<view @click="getconfirmreceive" class="b-btn">
				<button>立即领取</button>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {shareMixins} from '../../../mixins/share.js'
	export default {
		mixins:[shareMixins],
		data() {
			return {
				shareData: {
				    title: '空港卡券联盟客户端',
				    path: '/pages/index/index' // 分享的页面路径
				},
				coupon_center_code: '',
				openid: '',
				couponList: [],
				latitude:'',
				longitude:'',
				address:'',
				business_name:'',
				link_mobile:''
			}
		},
		onLoad(query) {
			// scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
			this.coupon_center_code = decodeURIComponent(query.scene)
			this.getCouponsInfo()
			this.openid = uni.getStorageSync('openid')
		},
		methods: {
			async getCouponsInfo() { //根据具二维码获取卡券信息
				var data = {
					coupon_center_code: this.coupon_center_code,
					// coupon_center_code: 'cfcc86044d9fdf3d25ce7aa27e78c44a',
					openid: this.openid
				}
				const res = await this.$myRequest({
					url: '/api/collect/getCollectCouponsInfo' + this.$u.queryParams(data)
				}).then((res) => {
					if (res.data.code === 1008) {
						this.$refs.uToast.show({
							title: '请先登录',
							type: 'warning'
						})
						setTimeout(() => {
							uni.redirectTo({
								url: '../../../pages/login/login'
							})
						}, 600)
					} else if (res.data.code === 2003) {
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'error'
						})
					} else if (res.data.code === 200) {
						this.couponList.push(res.data.data)
						this.latitude = parseFloat(this.couponList[0].lat)						this.longitude = parseFloat(this.couponList[0].lng)						this.address = this.couponList.address						this.business_name = this.couponList.business_name
						this.link_mobile = this.couponList.link_mobile
					}
				})
			},
			seeLocation(){//使用手机内置导航
				var _this = this
				uni.openLocation({
					latitude: _this.latitude,
					longitude: _this.longitude,
					address:_this.address,
					name:_this.business_name
				})
			},
			async getconfirmreceive() { //确认领取
				var data = {
					coupon_center_code: this.coupon_center_code
				}
				const res = await this.$myRequest({
					url: '/api/collect/collectCoupons' + this.$u.queryParams(data),
					method: 'POST'
				}).then((res) => {
					console.log(res.data)
					if (res.data.code === 200) {
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'success'
						})
						setTimeout(() => {
							uni.redirectTo({
								url: '../../../pages/index/index'
							})
						}, 1000)

					} else {
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'error'
						})
					}

				})
			},
			phoneCall(){//拨打电话
				var _this = this
				uni.makePhoneCall({
				    phoneNumber: _this.link_mobile 
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.buydetails {
		.big-box {
			.top {
				background-color: #FFFFFF;
				padding: 20rpx 32rpx 34rpx 32rpx;

				image {
					width: 100%;
					height: 252rpx;
					margin-bottom: 28rpx;
				}

				.m-tit {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 6rpx;

					text {
						font-size: 40rpx;
						font-weight: bold;
						color: #3C3C3C;
					}

					text:nth-child(2) {
						color: #EC5F2F;
					}
				}

				.f-tit {
					display: flex;
					align-items: center;
					justify-content: space-between;

					text {
						font-size: 24rpx;
						color: #8B8B8B;
					}

					text:nth-child(2) {
						font-size: 28rpx;
						color: #8B8B8B;
						text-decoration: line-through;
					}
				}
			}

			.m-box {
				padding: 20rpx 32rpx 30rpx 32rpx;
				background-color: #FFFFFF;
				margin-top: 16rpx;

				.t-item {
					margin-bottom: 40rpx;

					p {
						font-size: 32rpx;
						color: #3C3C3C;
						font-weight: bold;
					}

					.lz-box {
						margin-top: 20rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.item {
							display: flex;
							align-items: center;

							image {
								width: 28rpx;
								height: 28rpx;
								margin-right: 12rpx;
							}

							text {
								font-size: 24rpx;
								color: #8B8B8B;
								font-weight: bold;
							}
						}
					}
				}

				.item-1 {
					padding: 34rpx 0;
					border-top: 2rpx solid #F6F6F7;
					display: flex;
					align-items: center;
					justify-content: space-between;

					text {
						font-size: 32rpx;
						font-weight: bold;
						color: #333333;
					}

					text:nth-child(2) {
						font-size: 32rpx;
						color: #3C3C3C;
						font-weight: 200;
					}
				}

				.item-2 {
					padding: 34rpx 0;
					border-top: 2rpx solid #F6F6F7;

					.left {
						display: flex;
						justify-content: space-between;

						text {
							font-size: 32rpx;
							color: #333333;
							font-weight: bold;
						}

						.right {
							display: flex;
							align-items: center;

							text {
								font-size: 32rpx;
								color: #3C3C3C;
								font-weight: 200;
							}

							image {
								width: 60rpx;
								height: 40rpx;
								// margin-left: 30rpx;
							}
						}
					}

					p {
						font-size: 32rpx;
						color: #3C3C3C;
						font-weight: 200;
						text-align: right;
						margin-top: 32rpx;
					}
				}

				.sygz-box {
					margin-top: 68rpx;

					text {
						font-size: 32rpx;
						color: #3C3C3C;
						font-weight: bold;
					}

					.item-tit {
						margin-top: 20rpx;
						line-height: 40rpx;

						p {
							font-size: 28rpx;
							font-weight: 200;
							color: #3C3C3C;
						}
					}
				}
			}

			.b-btn {
				padding: 20rpx 32rpx 88rpx 32rpx;
				background-color: #FFFFFF;

				button {
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50rpx;
					background: linear-gradient(#FFB487, #EC5F2F);
					color: #FFFFFF;
					font-size: 36rpx;
				}

			}
		}

	}
</style>
